import 'package:flutter/material.dart';
import 'package:flutter_axrjc/widget/dialog.dart';
import 'package:flutter_widget_from_html/flutter_widget_from_html.dart';
import 'package:get/get.dart';

import 'logic.dart';

class HelpCenterDetailPage extends StatelessWidget {
  const HelpCenterDetailPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final state = Get.find<HelpCenterDetailLogic>().state;

    return Scaffold(
      backgroundColor: const Color(0xffF3F6F9),
      appBar: AppBar(
        backgroundColor: Colors.white,
        foregroundColor: Colors.black,
        titleSpacing: -10,
        elevation: 0,
        centerTitle: true,
        title: const Text(
          "帮助文章",
          style: TextStyle(fontSize: 15, fontWeight: FontWeight.bold),
        ),
      ),
      body: Padding(
        padding: const EdgeInsets.all(10),
        child: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Obx(() {
                return Text(
                  state.helpDetail.value?.contentTitle ?? '',
                  style: const TextStyle(
                      fontSize: 16, fontWeight: FontWeight.bold),
                );
              }),
              Padding(
                padding: const EdgeInsets.symmetric(vertical: 8),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Row(
                      children: [
                        InkWell(
                          onTap: () {
                            showPicPreview([
                              "${state.helpDetail.value?.baseCustomer?.avatar}"
                            ]);
                          },
                          child: Obx(() {
                            return CircleAvatar(
                              radius: 20,
                              backgroundImage: NetworkImage(
                                  "${state.helpDetail.value?.baseCustomer?.avatar}"),
                            );
                          }),
                        ),
                        const SizedBox(
                          width: 10,
                        ),
                        Obx(() {
                          return Text(
                              state.helpDetail.value?.baseCustomer?.nickName ??
                                  '');
                        }),
                      ],
                    ),
                    Obx(() {
                      return Text(
                        state.helpDetail.value?.createTime ?? "",
                        style: const TextStyle(
                            fontSize: 9, color: Color(0xff999999)),
                      );
                    })
                  ],
                ),
              ),
              const SizedBox(
                height: 5,
              ),
              InkWell(
                onTap: () {
                  showPicPreview(["${state.helpDetail.value?.articelHomePic}"]);
                },
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(10),
                  child: Obx(() {
                    if (state.helpDetail.value?.articelHomePic?.isEmpty ==
                            null ||
                        state.helpDetail.value?.articelHomePic?.isEmpty ==
                            true) {
                      return Container();
                    }
                    return SizedBox(
                      height: 200,
                      width: double.infinity,
                      child: Image.network(
                        state.helpDetail.value?.articelHomePic ?? '',
                        fit: BoxFit.cover,
                      ),
                    );
                  }),
                ),
              ),
              const SizedBox(
                height: 5,
              ),
              Padding(
                padding: const EdgeInsets.symmetric(vertical: 8),
                child: Obx(() {
                  return HtmlWidget(
                      state.helpDetail.value?.contentContent ?? '');
                }),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Obx(() {
                  var imgList = state.helpDetail.value?.filePathList ?? [];
                  return GridView.builder(
                    itemCount: imgList.length,
                    shrinkWrap: true,
                    physics: const NeverScrollableScrollPhysics(),
                    gridDelegate:
                        const SliverGridDelegateWithFixedCrossAxisCount(
                            crossAxisCount: 4,
                            crossAxisSpacing: 5,
                            mainAxisSpacing: 5,
                            childAspectRatio: 1),
                    itemBuilder: (BuildContext context, int index) {
                      var bean = imgList[index];
                      return InkWell(
                        onTap: () {
                          showPicPreview(
                              imgList.map((e) => "${e.filePath}").toList());
                        },
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(5),
                          child: Center(
                            child: Image.network("${bean.filePath}"),
                          ),
                        ),
                      );
                    },
                  );
                }),
              )
            ],
          ),
        ),
      ),
    );
  }
}
